<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				width: 1210px;
				margin: 100px auto;
			}
			li {
				height: 34px;
				cursor: pointer;
				font: 500 16px/34px "simsun";
			}
		</style>
	</head>
	<body>
		<ul>
        <li>北京股指  3063.31-22.18 (-0.72%)</li>
        <li>上海股指  3063.31-22.18 (-0.72%)</li>
        <li>广州股指  3063.31-22.18 (-0.72%)</li>
        <li>深圳股指  3063.31-22.18 (-0.72%)</li>
        <li>北京股指  3063.31-22.18 (-0.72%)</li>
        <li>上海股指  3063.31-22.18 (-0.72%)</li>
        <li>广州股指  3063.31-22.18 (-0.72%)</li>
        <li>深圳股指  3063.31-22.18 (-0.72%)</li>
    </ul>
	<script type="text/javascript">
		//需求:利用childNodes实现隔行变色
		//简单版
		var arr = document.getElementsByTagName("li");
		for(var i = 0;i<arr.length;i++){
			if(i%2===0){
				arr[i].style.backgroundColor = "#ccc";
			}
		}
		//复杂版
		//获取ul
		var ul = document.getElementsByTagName("ul")[0];
		var arr = ul.childNodes;
		//把元素节点重新放入一个新数组
		var newArr = [];
		for(var i = 0;i<arr.length;i++){
			if(arr[i].nodeType === 1){
				newArr.push(arr[i]);
			}
		}
		//隔行变色
		for(var i = 0;i<newArr.length;i++){
			if(i%2!=0){
				newArr[i].style.backgroundColor = "red";
			}
		}
	</script>
	</body>
</html>
